<template>
    <div class="page">
        <a-spin :spinning="spinning" style="height:100vh;max-height:none">
            <div class="title flexEndCenter">
                <a-button style="border-color:#1890ff;color:#1890ff;margin-right:20px" @click="handSign">手写签名</a-button>
                <a-button type="primary" @click="onSubmit" style="margin-right:60px">提交部署</a-button>
            </div>
            <div class="content flexCenter" style="align-items:flex-start">
                <div class="pdfDiv" id="pdfDiv" ref="pdfDiv" @scroll.passive="getScroll">
                    <div v-for="item in imgList" :key="item.ref" :ref="item.ref" style="height:100%" class="imgDiv">
                        <!-- <img :src="item.url" alt="" style="height:100%;"> -->
                        <div style="width:100%;height:100%">



                            <VueDragResize v-for="(item2, index) in item.pdfSignList" :key="item2.id" :ref="item2.id"
                                :style="{
                                    top: `${item2.top}px`,
                                    left: `${item2.left}px`
                                }" :isActive="true" :isDraggable="true" :preventActiveBehavior='true'
                                :parent-limitation="true" :w="150" :h="150" v-on:resizing="resize"
                                v-on:dragging="resize">
                                <div :style="{
                                    width: + vw + 'px', height: +vh + 'px', overflow: 'hidden'
                                }">
                                    <img :src="item2.imgUrl" style="width: 100%;height: 100%" />
                                </div>
                            </VueDragResize>




                            <!-- <div style="width:150px;height:150px">
                                <img :src="item2.imgUrl" style="width: 100%;height: 100%" />
                            </div> -->

                            <!-- 删除 -->
                            <!-- <div class="closeIcon" @click="delSign(item.pdfSignList, index)">
                                <myIcon type="close-outlined" style="color:#fff" />
                            </div> -->
                            <!-- 设置日期 -->
                            <!-- <div style="position:absolute;left:0px;top:-32px;" @click="setDate(item2)">
                                <a-button type="primary" size="small" style="background:#4F8BFF">设置日期</a-button>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="mySign">
                    <div style="border-bottom:1px solid #E4E6EA;height:40px;line-height:40px;margin-bottom:10px">
                        我的签名/印章
                    </div>
                    <div class="mySignList">
                        <div v-for="item in signList" :key="item.id" :vid="item.id" class="signListItem"
                            draggable="true" @dragstart="(e) => dragstart(e, item)" @dragend="dragend">
                            <img :src="item.imgUrl" alt="" style="width:100%;height:100%">
                        </div>
                    </div>
                </div>

                <div class="foot flexStartCenter" style="padding-left:15px;height: 50px;background:#F5F7F9">
                    <a-pagination :current="page" size="small" :total="pageNum(pageTotal)" :page-size="pageSize"
                        @change="pageChange" show-quick-jumper>
                    </a-pagination>
                </div>
            </div>

        </a-spin>
        <a-modal v-model:visible="qrCodevisible" :footer="null">
            <p>qrcode</p>
        </a-modal>
        <a-modal v-model:visible="dateVisible" :footer="null">
            <p>设置日期</p>
        </a-modal>
    </div>

</template>

<script>
import VueDragResize from "vue-drag-resize/src";
export default {
    components: { VueDragResize },
    data() {
        return {

            qrCodevisible: false,
            signList: [
                { id: 1, imgUrl: 'https://img0.baidu.com/it/u=922640307,3241298194&fm=253&fmt=auto&app=138&f=JPEG?w=736&h=500' }, { id: 2, imgUrl: 'https://img1.baidu.com/it/u=1167462586,3936780745&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=298' }
            ],
            imgList: [
                {
                    url: 'https://t7.baidu.com/it/u=3631608752,3069876728&fm=193&f=GIF',
                    ref: 'targetContent',
                    pdfSignList: []
                },
                {
                    url: 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
                    ref: 'targetContent2',
                    pdfSignList: []
                },
                {
                    url: 'https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF',
                    ref: 'targetContent3',
                    pdfSignList: []
                }
            ],
            pdfSignList: [],
            dragItem: null,
            moveItem: null,
            spinning: false,
            page: 1,
            pageSize: 1,
            pageTotal: 3,
            dateVisible: false,
            //VueDragResize
            vw: 0,
            vh: 0,
            top: 0,
            left: 0,
        }
    },
    created() {
        this.vw = 150 + 'px'
        this.vh = 150 + 'px'
    },
    mounted() {
        // this.$nextTick(() => {
        window.addEventListener('scroll', this.getScroll, true)
        // })

    },
    // 页面销毁前
    beforeDestroy: function () {
        window.removeEventListener("scroll", this.getScroll);
    },
    methods: {
        //设置日期
        setDate(obj) {
            this.dateVisible = true
        },
        //删除签字
        delSign(arr, index) {
            arr.splice(index, 1)
        },
        getScroll(event) {
            // 获取滚动条离顶部的距离
            let top = event.target.scrollTop;
            // console.log(top)
            var oDiv = document.getElementById("pdfDiv");
            let pdfDivHeight = (window.getComputedStyle(oDiv).height.replace('px', '')) - 0
            let page = top / pdfDivHeight
            page = Math.round(page)
            this.page = page + 1
        },

        //手动签字
        handSign() {
            this.qrCodevisible = true
            console.log(this.qrCodevisible);
        },
        //提交
        onSubmit() {
            this.spinning = true
            setTimeout(() => {
                this.spinning = false
            }, 2000);
        },

        pageNum(val) {
            if (val == 0) {
                return 1
            } else {
                return val
            }
        },
        pageChange(current, pageSize) {
            this.page = current
            this.pageSize = pageSize
            // let refDiv=
            document.getElementsByClassName('imgDiv')[current - 1].scrollIntoView({ behavior: 'smooth', block: 'start' })
        },
        //拖拽
        dragstart(e, item) {
            this.dragItem = item;
            this.dragItem.vid = e.currentTarget.getAttribute("vid")
            let imgDivDoms = document.querySelectorAll('.imgDiv')
            // 设置元素的放置行为——移动
            imgDivDoms[this.page - 1].addEventListener("dragenter", this.dragenter);
            // 在目标元素经过 必须要阻止默认行为 否则不能触发drop
            imgDivDoms[this.page - 1].addEventListener("dragover", this.dragover);
            // 离开目标元素时设置元素的放置行为——不能拖放
            imgDivDoms[this.page - 1].addEventListener("dragleave", this.dragleave);
            // 拖动元素在目标元素松手时添加元素到画布
            imgDivDoms[this.page - 1].addEventListener("drop", this.drop);
        },
        dragend(e) {
            let imgDivDoms = document.querySelectorAll('.imgDiv')
            imgDivDoms[this.page - 1].removeEventListener("dragenter", this.dragenter);
            imgDivDoms[this.page - 1].removeEventListener("dragover", this.dragover);
            imgDivDoms[this.page - 1].removeEventListener("dragleave", this.dragleave);
            imgDivDoms[this.page - 1].removeEventListener("drop", this.drop);

        },
        dragenter(e) {
            e.dataTransfer.dropEffect = "move";
        },
        dragover(e) {
            e.preventDefault();
        },
        dragleave(e) {
            e.dataTransfer.dropEffect = "none";
        },
        drop(e) {

            const { vid, imgUrl } = this.dragItem;
            let obj = this.imgList[this.page - 1]
            obj.pdfSignList.push({
                top: e.offsetY - 75,
                left: e.offsetX - 75,
                zIndex: 3,
                id: Date.parse(new Date()),
                vid,
                imgUrl
            });
            console.log(obj.pdfSignList);
            this.dragItem = null;

        },
        mousedown(e, item) {
            console.log(e);
            let obj = item
            // obj.top=e.offsetY
            // obj.left=e.offsetX
            this.moveItem = obj;

            document.addEventListener("mousemove", this.mousemove);
            document.addEventListener("mouseup", this.mouseup);
        },
        mousemove(e) {
            const _this = this;
            // console.log(e);
            let { clientX, clientY, offsetX, offsetY } = e;
            let obj = this.imgList[this.page - 1]
            const moveIdx = obj.pdfSignList.findIndex(function (o) {
                return o.id === _this.moveItem.id;
            });
            let newList = JSON.parse(JSON.stringify(obj.pdfSignList));
            var oDiv = document.getElementById("pdfDiv");
            let Rect = oDiv.getBoundingClientRect()
            newList[moveIdx].top = clientY - Rect.y - 75;
            newList[moveIdx].left = clientX - Rect.x - 75;
            // console.log(window.getComputedStyle(oDiv).width);
            // console.log(window.getComputedStyle(oDiv).height);
            let pdfDivHeight = (window.getComputedStyle(oDiv).height.replace('px', '')) - 150
            let pdfDivWidth = (window.getComputedStyle(oDiv).width.replace('px', '')) - 150
            if (newList[moveIdx].top > 0 && newList[moveIdx].top < pdfDivHeight) {
                // console.log(newList[moveIdx].left);
                if (newList[moveIdx].left > 0 && newList[moveIdx].left < pdfDivWidth) {
                    obj.pdfSignList = newList;
                }

            }

        },
        mouseup(e) {
            document.removeEventListener("mousemove", this.mousemove);
            document.removeEventListener("mouseup", this.mouseup);
        },
    }
}
</script>
<style scoped>
.title {
    background: #fff;
    height: 46px;
}

.content {
    width: 100%;
    min-width: 1240px;
    background: #898989;
    position: relative;
    height: calc(100vh - 46px);
}

.pdfDiv {
    width: 800px;
    text-align: center;
    margin-top: 4px;
    height: calc(100vh - 100px);
    overflow: auto;
    background: #fff;
}

.imgDiv {
    position: relative;
    overflow: hidden;
}

.mySign {
    background: #E4E6EA;
    position: absolute;
    padding: 23px;
    padding-top: 10px;
    width: 207px;
    right: 0;
    top: 0;
    z-index: 1;
    height: calc(100vh - 96px);
    overflow: auto;
}

.foot {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.signListItem {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    background: #fff;
    object-fit: cover;
}

.signListItemPre {
    user-select: none;
    background: none;
    /* width: 150px;
    height: 150px; */
    /* border: 1px dashed #1890ff; */
    position: absolute;
    /* padding: 3px; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.closeIcon {
    position: absolute;
    right: -8px;
    top: -12px;
    cursor: pointer;
    background: #4F8BFF;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 18px;
}

::v-deep .content-container {
    overflow: hidden;
}

/* ::v-deep .vdr {
    position: static;
} */
</style>
